<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#app{
				position: relative;
			}
			#op {
				width: 210px;
				height: 80px;
				border: 2px solid purple;
				margin: 0 auto;
				border-radius: 30px;
				padding: 10px;
				background-color: black;
				color: #800080;
				overflow: hidden;
			}
			
			#op>div {
				height: 40px;
				line-height: 40px;
				text-align: right;
				font-size: 36px;
				
				
			}
			
			ul {
				float: left;
				width: 180px;
				height: 90px;
				/*border: 1px solid #FFFF00;*/
			}
			
			ul>li {
				float: left;
				width: 31%;
				height: 20px;
				border: 1px solid #9ACD32;
				text-align: center;
				cursor: pointer;
			}
			li{
				margin: 1px;
			}
			
			.haha {
				float: left;
				width: 28px;
				height: 20px;
				border: 1px solid #9ACD32;
				text-align: center;
				cursor: pointer;
			}
			
			.kl {
				width: 210px;
				margin: 0 auto;
			}
			
			.kl>ol {
				float: right;
				width: 30px;
			}
			input{
				opacity: 0;
				height: 0px;
				width: 0px;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<label for="va"><div id="app">
			点击显示框可键盘输入，小写c是复位键，del键和退格键是del键，回车是等于号，不支持数字键盘输入
			<s_imp></s_imp>
		</div></label>
		<template id="s_imp">
			<div>
				<div id="op">
					<div id="map1">{{result1}}</div>
					<div id="map2">{{result2}}</div>
				</div>
				<son v-on:calcu="calcula($event)"></son>
				<son1 v-on:calcu="calcula($event)"></son1>
			</div>
		</template>
		<template id="s_inp">
			<div class="kl">
				<ul>
					<li v-for="index in 10" @click="inp(10-index)">{{10-index}}</li>
					<li @click="inp('=')">=</li>
					<li @click="inp('.')">.</li>
					<li class="" @click="inp('c')">C</li>
					<li class="" @click="inp('del')">del</li>
				</ul>
				<ol>
					<li class="haha" @click="inp('+')">+</li>
					<li class="haha" @click="inp('-')">-</li>
					<li class="haha" @click="inp('*')">*</li>
					<li class="haha" @click="inp('/')">/</li>
				</ol>
			</div>
		</template>
		<template id="s_inp1">
			<input @keyup.my_code="inp1($event)" id="va" />
		</template>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var son_com = {
				template: "#s_inp",
				methods: {
					inp: function(index) {
						this.$emit('calcu', index);
					}
				}
			},
			son1_com={
				template: "#s_inp1",
				methods: {
					inp1: function(q) {
						if(!isNaN(parseInt(q.key))){
							this.$emit('calcu', parseInt(q.key));
						}else if(q.key=="+"||q.key=="-"||q.key=="*"||q.key=="/"||q.key=="."||q.key=="="||q.key=="c"){
							this.$emit('calcu', q.key);
						}else if(q.key=="Backspace"||q.key=="Delete"){
							this.$emit('calcu', "del");
						}else if(q.key=="Enter"){
							this.$emit('calcu', "=");
						}
					}
				}
			};
			var is_key = true,
				is_run = false,
				is_fir = false,
				is_spot = false;
			Vue.component("s_imp", {
				template: "#s_imp",
				components: {
					son: son_com,
					son1: son1_com,
				},
				data: function() {
					return {
						result2: 0,
						result1: "",
						sum: 0,
						k: "",
					}
				},
				methods: {
					calcula: function(e) {
						if(isNaN(e) & e != "."&e!="del" ) {
							if(!is_run) {
								is_run = true;
								this.result1 = this.result1 + this.result2 + e;
								if(!is_fir) {
									is_fir = true;
									this.sum = parseFloat(this.result1);
								}
								if(this.k == "+") {
									this.sum += parseFloat(this.result2);
								} else if(this.k == "-") {
									this.sum -= parseFloat(this.result2);
								} else if(this.k == "*") {
									this.sum = this.sum * parseFloat(this.result2);
								} else if(this.k == "/") {
									this.sum = this.sum / parseFloat(this.result2);
								}
								this.k = e,
									this.result2 = this.sum,
									is_key = true;
									if(e!="="){
								is_spot = false;}else{
									is_spot = true;
								}
							}
						} else if(e!="del"){
							is_run = false;
							if(e == ".") {
								if(!is_spot) {
									this.result2 += e.toString();
									is_spot = true;
									is_key = false;
								}
							} else {
								if(!is_key) {
									this.result2 += e.toString();
								} else {
									is_key = false;
									this.result2 = e;
								}
							}
						}
						if(e == "=") {
							
							this.result1 = "",
								this.result2 = this.sum,
								is_run = false,
								this.sum = 0,
								this.k = "",
								is_key = true,
								is_run = false,
								is_fir = false
						}
						if(e == "c") {
							this.result2 = 0,
								this.result1 = "",
								this.sum = 0,
								this.k = "",
								is_key = true,
								is_run = false,
								is_fir = false,
								is_spot = false

						}
						if(e=="del"&this.result2.length>0){
						this.result2=this.result2.substring(0,this.result2.length-1);
						}
					}
				}
			})
			Vue.config.keyCodes={
				my_code:[48,49,50,51,52,53,54,55,56,57,190,8,46,67,187,191,189,13],
			}
			new Vue({
				el: "#app",
			})
		</script>

	</body>

</html>